<template>
    <div style="height: 100%">
        <form class="form" action="#">
            <div class="lableInput">
                <div class="div_lable">
                    <label>First Name</label>
                </div>
                <div class="div_input">
                    <input type="text" id="firstname" name="firstname" placeholder = "Your Name"></input>
                </div>
            </div>
            <div class="lableInput">
                <div class="div_lable">
                    <label>Second Name</label>
                </div>
                <div class="div_input">
                    <input type="text" id="secondName" name="secondName" placeholder = "Your Second Name"></input>
                </div>
            </div>
            <div class="lableInput">
                <div class="div_lable">
                    <label>Contry</label>
                </div>
                <div class="div_input">
                    <select id = "contry" name="contry" class="selectStype">
                        <option value="china">中国</option>
                        <option value="us">美国</option>
                        <option value="jp">日本</option>
                    </select>
                </div>
            </div>
            <div class="lableInput">
                <div class="div_lable">
                    <label>Remark</label>
                </div>
                <div class="div_input">
                    <textarea rows="10" name="remark" id="remark" placeholder="请输入介绍"></textarea>
                </div>
            </div>

            <div class="mybuttonDiv">
                <button class="myButton">提交</button>
            </div>


        </form>
    </div>
</template>

<script>
    export default {
        name: "index.vue"
    }
</script>

<style>
    .form {
        background: #e7e7e7;
        height: 60%;
        border: 1px dotted gray;
    }

    .lableInput{
        margin-top: 35px;
        clear: both;
    }

    .mybuttonDiv{
        clear: both;
        float: right;
        padding: 10px;
        margin-right: 80px;
    }

    .div_lable {
        display: block;
        width: 10%;
        padding: 30px;
        float: left;
        font-family: 微软雅黑;
        font-size: 25px;
    }

    .div_input {
        display: block;
        width: 83%;
        padding: 13px;
        float: left;
    }

    input[type=text],select,textarea{
        padding: 12px;
        width: 100%;
        border-radius: 5px;
        font-family: 微软雅黑;
    }

    .selectStype{
        padding: 13px;
        width: 101%;
    }

    .myButton{
        background-color: #4CAF50;
        color: white;
        padding: 15px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    .myButton:hover  {
        background-color: rgba(62, 255, 85, 0.4);
    }

</style>